<template>

  <view class="play_views_main">
    <view class="left">
      <view class="video-player" v-if="movieData && movieData.length > 0">
        <video
            ref="videoPlayer"
            class="video-js"
            controls
            preload="auto" style="height:500px; width: 100%;"
            @timeupdate="handleTimeUpdate">
          <source :src="this.movieData[0].url" type="video/mp4" />
        </video>
        <!-- <el-video src="https://movie.cpb2013.top/source/铃芽之旅/trailer.mp4" controls></el-video> -->
      </view>

  </view>
    <view class="right">
      <view class="video_info">
        <view class="moviedata" v-for="moviedata in movieData" :key="moviedata.id">
          <view class="moviename">{{ moviedata.name }}</view>
          <!-- <div class="moviename">{{ moviedata.poster }}</div> -->
          <view class="movieimg"><el-image :src="moviedata.poster" style="width: 70%;border-radius: 1em;"/></view>
          <view class="movietype">{{ moviedata.type }}</view>
          <!-- <div class="movieimg" ><img src:{{ moviedata.poster }}/></div> -->
          <view class="moviescore"><font-awesome-icon icon="fa-solid fa-face-smile" />{{ moviedata.score }} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <font-awesome-icon icon="fa-solid fa-film" />{{ moviedata.length }}</view>
        </view>
      </view>
    </view>

  </view>

</template>

  
  <script>
  import videoPlayer from "@/components/VideoPlayer.vue";
  import {ref} from "vue";

  export default {
    props: ['MID'],
    name: 'HLSVideoPlayer',
    computed: {
      videoPlayer() {
        return videoPlayer
      }
    },
    data() {
      return {
        videoUrl: 'your-video-url.mp4', // 视频链接
        rating: 4, // 静态评分（用实际数据替换）
        isFavorite: false, // 收藏状态（用API数据替换）
        isLiked: false, // 点赞状态（用API数据替换）
        isTalkNum:null,
        comment:'',
        isTalk:null,
        comments: [], // 评论列表
        comments_NoFID0: [], // 评论列表
        avatarUrl: '', // 头像链接
        commentavatarUrl:ref([]),
        commenttalk:'',
        showReply: false, // 控制回复输入框和确认回复按钮的显示与隐藏的变量
        showReplyButton:true,
        localStrongName:"",
        movieID:'',
        user_key:'',
        movieData:null,
        movieData_recommend:null,
        player_time:0,
        
      };
    },
    created() {
      this.user_key=localStorage.getItem('key');
      this.movieID = this.MID;

      this.fetchMovieData();
      // this.fetchRecommendedMovies();
    },
    mounted() {

    // this.localStrongName=localStorage.setItem('name','super');
    this.localStrongName=localStorage.getItem('name');
    console.log(this.localStrongName);
    this.initializeVideoPlayer();
    this.uploadViewsRecord();
  },
    beforeDestroy() {
      const videoPlayer = this.$refs.videoPlayer;
      videoPlayer.removeEventListener("timeupdate", this.handleTimeUpdate);

      // 在组件销毁前清除定时器
      clearInterval(this.uploadInterval);
    },
    methods: {
        onPlay() {
      const videoPlayer = this.$refs["videoPlayer"];
      // console.log("play/pause", player)

      if (videoPlayer.paused) {
        videoPlayer.play()
        this.isPause = false
      } else {
        videoPlayer.pause()
        this.isPause = true
      }
    },// 初始化视频播放器
      handleTimeUpdate(event) {
        const videoPlayer = this.$refs.videoPlayer;
        this.player_time = videoPlayer.currentTime
        console.log("Current Time:", this.player_time);
        this.uploadPlayRecord(this.player_time);
      },
      async uploadPlayRecord(time) {

        const formData = new FormData();
        formData.append('key', this.user_key);
        formData.append('MID', this.MID);
        formData.append('time', time);

        const response = await fetch('https://movie.cpb2013.top/account_history.php?mode=add_user_movie_history', {
          method: 'POST',
          body: formData
        });
        const data = await response.json();

        // 模拟上传记录的操作，实际项目中需要根据具体需求进行实现
        console.log("Uploading play record reply:", data);
      },
      async uploadViewsRecord() {

/*        const formData = new FormData();
        formData.append('key', this.user_key);
        formData.append('MID', this.MID);
        formData.append('time', time);*/

        const response = await fetch('https://movie.cpb2013.top/movie_plays.php?mode=admin_open&MID='+this.MID+'&key='+this.user_key, {
          method: 'GET',
        });
        const data = await response.json();

        // 模拟上传记录的操作，实际项目中需要根据具体需求进行实现
        console.log("Uploading Views record reply:", data);
      },
    initializeVideoPlayer() {
      if (this.movieData && this.movieData.url) {
        // 初始化 video.js 播放器
        this.player = videojs(this.$refs.videoPlayer, {
          autoplay: true,
          controls: true,
          controlBar:true,
          preload: true,
          fluid: true,
          userActions: {
            click: true,
            doubleClick: true,
            hotkeys: true // 是否支持热键
          },
        }, function() {
          // video.js准备好后执行的回调函数
          // video.js 准备好后执行的回调函数
          console.log('Video.js player is ready');
        });

        // 监听错误事件
        this.player.on('error', (error) => {
          console.error('发生错误：', error);
        });
      } else {
        console.error('无效的电影数据或 URL');
      }
    },
    async fetchMovieData() {
      const MID = this.MID;
      const url = `https://movie.cpb2013.top/movie_info.php?MID=${MID}`;

      try {
        const response = await fetch(url);
        const data = await response.json();
        this.movieData = data.data; // 将获取的电影信息保存到组件的数据中
      } catch (error) {
        console.error('Error fetching movie info:', error);
      }
    }
  
}
    

};
</script>
  
  <style scoped>

  .play_views_main
  {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    width: 100%;
    max-width: 800px;
  }

  .left
  {
/*    padding: 100px 20px 20px 50px;*/
/*    padding-top: 40px;*/
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    width: 70%;
  }

  .right
  {
/*    padding: 80px 20px 20px 20px;*/
/*    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    width: 30%;*/
    //padding: 0 20px 0px 20px;
    width: 30%;
    align-items: center;
    align-content: center;
  }
  .video_info
  {
    //padding: 0 20px 0px 20px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    width: 100%;
  }

  .control-btn
  {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    padding: 20px 0 0 0;
  }

  .comment-title
  {
    padding: 10px 0 10px 0;
    height: 30px;
    font-size: 24px;
    font-weight: 700;
  }

  .comment-title-count
  {
    height: 100%;
    margin-left: 10px;
    color: darkgray;
    font-size: 18px;
    font-weight: 500;
    align-items: center;
  }

  .comment-input
  {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    //width: 95%;
    padding: 20px 0px 20px 20px;
  }

  .comment-text
  {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    //width: 95%;
    padding: 20px 0px 20px 20px;
  }

  .comment-avatar
  {
    display: flex;
    width: 5%;
    justify-content: center;
  }
  .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
  }
.comment-box
{
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  width: 100%;
  height: 60px;
}
  .comment-box-right
  {
    margin-left: 50px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    width: 100%;
    height: 60px;
  }
.comment-box-img
{
  width: 5%;
  display: flex;
  justify-content: center;
}
.comment-box-info
{
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}
  .comment-box-userinfo
  {
    display: flex;
    height: 50%;
    align-items: center;
    padding-left: 5px;
  }
  .comment-box-userinfo-username
  {
    display: flex;
    height: 100%;
    align-items: center;
    color: darkgrey;
    font-size: 14px;
    font-weight: 500;
  }
  .comment-box-userinfo-text
  {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: left;
    padding-left: 10px;
    color: black;
    font-size: 18px;
    font-weight: 500;
  }
  .comment-box-time_btn
  {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    height: 50%;
    align-items: center;
    padding-left: 5px;
    color: #9a9a9a;
  }
.comment-box-time_btn-time
{
  font-size: 12px;
  color: darkgray;
  font-weight: 400;
  margin-right: 10px;
}
  .player-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  /* .video-player {
    width:1000px;
    margin-bottom: 20px;
  } */
  
  .controls {
    display: flex;
    align-items: center;
  }
  
  .controls .el-button {
    margin-right: 10px;
  }
  .comment-actions-right
  {
    margin-left: 100px;
  }
  .isTalk-right
  {
    margin-left: 100px;
  }
  .moviedata{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    //height: 400px;
    //position: absolute;
    //right: 1rex;
    //top:100px;
    //width:400px;
    //height:700px;
  }
  .movieimg{
    //height: 500px;
    display: flex;
    justify-content: center;
    width: 100%;
  overflow: hidden;
  //border-radius: 1em;
  }
.moviename{
  color: black;
  font-size: 24px;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
}
.movietype{
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
  font-size: 22px;
  font-weight: 700;
  height: 40px;
  padding: 10px;
}
.moviescore{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
}

.isTalkNum{
  height: 50px;
  left: 100px;
}
.comments{
  overflow: hidden;
}
.isTalk{
left: auto;
}
  .web-top
  {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.55); /* 半透明白色背景 */
    backdrop-filter: blur(5px); /* 模糊效果，用于提高半透明度的视觉效果 */
  }
  .video_recommend
  {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;

  }
  .video_recommend-items
  {
    display: flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 20px 0px 20px 0px;
  }
  </style>
  